<template>
  <div class="container">
    <el-card shadow="always">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="query.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            @change="onDateTime"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>

        <el-col :span="4">
          <el-select v-model="query.billType" :clearable="false">
            <el-option
              v-for="(item, index) in [
                { text: '票据类型', value: '' },
                { text: '统一实名票据', value: '0' },
                { text: '统一匿名票据', value: '1' },
                { text: '其他票据', value: '2' },
                { text: '凭证登记', value: '3' },
              ]"
              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="4">
          <el-select v-model="query.categoryVoucherCount" :clearable="false">
            <el-option
              v-for="(item, index) in [
                { text: '合格证明文件', value: '' },
                { text: '有', value: '0' },
                { text: '无', value: '1' },
              ]"
              :key="index"
              :label="item.text"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-button
            type="primary"
            @click="
              query.pageIndex = 1;
              getList();
            "
            >查询</el-button
          >
        </el-col>
      </el-row>
      <rz-height></rz-height>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="purchaseTime" label="进货日期" width="180px">
        </el-table-column>
        <el-table-column prop="salesSubitemName" label="品种" width="150px">
          <template slot-scope="scope">
            {{ scope.row.salesSubitemName || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="purchaseWeight" label="数量" width="120px">
          <template slot-scope="scope">
            {{ scope.row.purchaseWeight }}{{ scope.row.company }}
          </template>
        </el-table-column>
        <el-table-column prop="scunitName" label="供应商"></el-table-column>
        <el-table-column prop="billType" label="票据类型" width="150px">
          <template slot-scope="scope">
            <div v-if="scope.row.billType == '统一实名票据'" class="green">
              {{ scope.row.billType }}
            </div>
            <div v-else class="red">{{ scope.row.billType }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="billType" label="合格证明文件" width="150px">
          <template slot-scope="scope">
            <div v-if="scope.row.categoryVoucherCount > 0" class="green">
              有
            </div>
            <div v-else>无</div>
          </template>
        </el-table-column>
        <!-- <el-table-column  label="检查状态"> 
            <template slot-scope="scope">
                <div v-if="scope.row.taskStatus==0">暂未检查</div>
                <div v-else-if="scope.row.taskStatus==1">已检查</div>
                <div v-else>未检查原因:{{scope.row.completeExplain}}</div>
          </template>

        </el-table-column> -->
        <el-table-column prop="" label="操作" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        @pagination="getList"
        :page.sync="query.pageIndex"
      />
    </el-card>

    <rz-dialog
      :dialogVisible.sync="dialogVisible"
      :isShowConfirm="false"
      title="查看索证索票详情"
      width="60%"
    >
      <el-form label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="进货日期">
              {{ data.purchaseTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购类别">
              <div v-if="data.billType == '统一实名票据'" class="green">
                {{ data.billType }}
              </div>
              <div v-else class="red">{{ data.billType }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商"> {{ data.scunitName }} </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="录入时间">
              {{ data.completionDate }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="品种名称">
              {{ data.salesSubitemName || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量"
              >{{ data.purchaseWeight }} {{ data.company }}</el-form-item
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产地/生产厂商" label-width="auto">
              {{ data.manufacturerStr || "--" }}
            </el-form-item>
          </el-col>
        </el-row>
        <rz-height />
        <div class="title">快检记录</div>
        <rz-height />
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="quickCheckDateStr" label="检测日期">
          </el-table-column>
          <el-table-column prop="salesSubitemName" label="检测品种">
          </el-table-column>
          <el-table-column prop="quickCheckSubitemName" label="检测项目">
          </el-table-column>
          <el-table-column prop="quickCheckResult" label="检测结果">
            <template slot-scope="scope">
              <div v-if="scope.row.quickCheckResult == '+'" class="red">
                疑似阳性
              </div>
              <div v-else class="green">阴性</div>
            </template>
          </el-table-column>
          <el-table-column prop="quickCheckUnitName" label="快检单位">
          </el-table-column>
        </el-table>
        <rz-height />
        <div class="title">合格证明文件</div>
        <rz-height />
        <div class="tips">
          <span  @click="tipsDialog=true">查看食品合格证明文件说明</span>
        </div>
        <el-image
          style="width: 100px; height: 100px"
          v-for="item in testReportResponseList"
          :key="item.id"
          :src="item.url"
          :preview-src-list="testReportResponseList.map((x) => x.url)"
        >
        </el-image>
        <rz-height />
        <div
          v-for="item in testReportResponseListPDF"
          :key="item.id"
          class="link"
          @click="$downloadFiles(item.url)"
        >
          {{ item.salessubitemname }}的检测报告.pdf
        </div>
        <el-empty
          :image-size="100"
          v-if="
            testReportResponseListPDF.length == 0 &&
            testReportResponseList.length == 0
          "
        ></el-empty>
        <rz-height />
        <div class="title">采购凭证</div>
        <rz-height />
        <el-image
          style="width: 100px; height: 100px"
          v-for="item in purchasingDocumentsResponseList"
          :key="item.id"
          :src="item.url"
          :preview-src-list="purchasingDocumentsResponseList.map((x) => x.url)"
        >
        </el-image>
        <el-empty
          :image-size="100"
          v-if="purchasingDocumentsResponseList.length == 0"
        ></el-empty>
        <!-- <el-form-item
          label="采购凭证"
          v-if="
            data.certificateAndTicketImgList &&
            data.certificateAndTicketImgList.length
          "
        >
          <el-image
            v-for="(item, index) in data.certificateAndTicketImgList"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item.fileAddress"
            :preview-src-list="
              data.certificateAndTicketImgList.map((x) => x.fileAddress)
            "
          >
          </el-image>
        </el-form-item> -->
      </el-form>
    </rz-dialog>
       <rz-dialog
      :dialogVisible.sync="tipsDialog"
      :isShowConfirm="false"
      title="食品合格证明文件说明"
      width="60%"
    ><div>根据2018版《餐饮服务食品安全操作规范》要求，对食品合格证明文件要求说明如下：</div>
        <rz-height />
      <el-table :data="tipList" border style="width: 100%">
          <el-table-column prop="category" label="食品类别" width="240">
          </el-table-column>
          <el-table-column prop="file" label="食品合格证明文件">
          </el-table-column>
      </el-table>
       </rz-dialog>
  </div>
</template>
<script>
import calendar from "@/views/enterprise/components/calendar";
import {
  findCertificateAndTicketList,
  jcFindListByCondition,
  findTestReportAndPurchasingDocuments,
} from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.query.startDateCompletion = this.$moment()
      .subtract(7, "day")
      .format("YYYY-MM-DD");
    this.query.endDateCompletion = this.$moment().format("YYYY-MM-DD");
    this.query.time = [
      this.$moment().subtract(7, "day").format("YYYY-MM-DD"),
      this.$moment().format("YYYY-MM-DD"),
    ];
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      //   options: ["合格", "不需要考核"],
      query: {
        billType: "",
        pageIndex: 1,
        pageSize: 10,
        startDateCompletion: "",
        endDateCompletion: "",
        time: "",
        unitId: sessionStorage.getItem("chainId"),
        categoryVoucherCount: "",
      },
      tableData: [],
      total: 0,
      dialogVisible: false,
      data: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      testReportResponseList: [],
      testReportResponseListPDF: [],
      purchasingDocumentsResponseList: [],
      list: [],
      tipsDialog:false,
      tipList:[
        { 
          category:"猪肉类",
          file:"每批次提供“动物产品检疫合格证明”、“肉品品质检验合格证明”、“非洲猪瘟检测报告”"
        },
        { 
          category:"其它畜禽肉",
          file:"每批次提供“动物产品检疫合格证明”"
        },{ 
          category:"蔬菜、水果、水产",
          file:"每批次提供快检报告"
        },{ 
          category:"预包装食品、豆制品、食品添加剂",
          file:"每批提供“检验合格证”或“出厂检验报告”、“第三方检测报告”"
        }
      ]
    };
  },
  // 方法
  methods: {
    getList() {
      findCertificateAndTicketList(this.query).then((res) => {
        this.total = res.totalCount;
        this.tableData = res.data.list;
      });
    },
    view(e) {
      this.data = e;
      jcFindListByCondition({
        pageIndex: 0,
        pageSize: 0,
        purchasecode: e.purchaseCode,
        purchasetime: e.purchaseTimeStr,
        salessubitemname: e.salesSubitemName,
        sclicenseno: e.sclicenseno,
        unitId: sessionStorage.getItem("interpretation"),
      }).then((res) => {
        this.list = res.data.list;
        findTestReportAndPurchasingDocuments({
        purchasecode: e.purchaseCode,
        detailsId: e.spsId,
      }).then((res) => {
        this.dialogVisible = true;
        this.testReportResponseList = [];
        this.testReportResponseListPDF = [];
        this.purchasingDocumentsResponseList = [];
        res.data.purchasingDocumentsResponseList.forEach((x) => {
          x.url = x.fileaddress;
        });
        this.purchasingDocumentsResponseList =
          res.data.purchasingDocumentsResponseList;

        res.data.testReportResponseList.forEach((x) => {
          x.url = x.fileaddress;
          if (x.url.match(/[^\.]\w*$/)[0] !== "pdf") {
            this.testReportResponseList.push(x);
          } else {
            this.testReportResponseListPDF.push(x);
          }
        });
      });
      });
     
    },
    onDateTime(e) {
      if (e) {
        this.query.startDateCompletion = e[0];
        this.query.endDateCompletion = e[1];
      } else {
        this.query.startDateCompletion = "";
        this.query.endDateCompletion = "";
      }
    },
    tips(){
      console.log(123);
    }
    // findCertificateAndTicketById
  },
  // 监听属性
  watch: {},
  // 组件
  components: {
    calendar,
  },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.container {
  /deep/ .el-date-editor {
    width: 100% !important;
  }
  /deep/ .el-image {
    margin-right: 10px;
  }
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  .link {
    cursor: pointer;
    color: $default;
  }
  .title {
    font-size: $title;
    font-weight: 700;
  }
  .tips {
    display: flex;
    justify-content: flex-end;
    span {
      color: $default;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
</style>